<template>
  <div class="turn-container">
    <div class="turn-banner">
      <div class="turn-content">
        <div id="flipbook">
          <el-image v-for="(item, index) in imgList" :key="index" fit="fill" 1:src="item.url" alt="" srcset="" />
        </div>
      </div>

      <div class="slider-bar">
        <div v-for="(item, index) in imgList" :key="index" class="slider" :class="{ 'slider-current': index + 1 == currentPage }" @click="toPageHandle(index)"></div>
      </div>
      <div class="nextHandle">下一页</div>
      <!-- <div class="block">
        <span class="demonstration">不显示间断点</span>
        <el-slider v-model="value1" :step="10" @change="changeHandle()">
        </el-slider>
      </div> -->
    </div>
  </div>
</template>
<script>
// import { ref, nextTick, onMounted } from "vue";
import turn from "../utils/turn.js";
import $ from "jquery";
export default {
  data() {
    return {
      value1: 0,
      imgList: [
        {
          url: require("../assets/1.jpg"),
          id: 0,
        },
        {
          url: require("../assets/2.jpg"),
          id: 1,
        },
        {
          url: require("../assets/3.jpg"),
          id: 2,
        },
        {
          url: require("../assets/4.jpg"),
          id: 3,
        },
        {
          url: require("../assets/5.jpg"),
          id: 4,
        },
        {
          url: require("../assets/6.jpg"),
          id: 5,
        },
        // {
        //   url: require("../assets/7.jpg"),
        //   id: 7,
        // },
        {
          url: require("../assets/logo.png"),
          id: 6,
        },
        {
          url: require("../assets/logo.png"),
          id: 7,
        },
        {
          url: require("../assets/logo.png"),
          id: 8,
        },
        {
          url: require("../assets/logo.png"),
          id: 9,
        },
      ],
      currentPage: 10,
      toPage: 1,
    };
  },
  methods: {
    nextHandle(){
     console.log(first)
     $("#flipbook").turn("addPage", element, 4);

    },
    toPageHandle(index) {
      this.currentPage = index + 1;
      $("#flipbook").turn("page", this.currentPage); //进度条跳转到对应的页数
    },
    onTurn() {
      // this.nextTick(() => {
      $("#flipbook").turn({
        autoCenter: true,
        height: 646, //高度
        width: 996, //宽度
        display: "double", //单页显示/双页显示  single/double
        elevation: 50,
        duration: 500, //翻页速度(毫秒), 默认600ms
        gradients: true, //翻页时的阴影渐变, 默认true
        autoCenter: true, //自动居中, 默认false
        acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
        page: 1, //设置当前显示第几页
        pages: this.imgList.length, //总页数
        disable:false,
        when: {
          //监听事件
          turning: function (e, page, view) {
            console.log(e, page, view);

            // 翻页前触发
          },
          turned: function (e, page) {
            console.log(e, page);
            this.currentPage = page;
            // 翻页后触发
          },
        },
      });
      // });
    },
    addPage(){

    },
    changeHandle(e){
        console.log(e)
    }
  },
  mounted() {
    this.onTurn();
  },
  components: {},
  setup() {
  },
};
</script>
<style lang="scss" scoped>
.turn-banner {
  width: 100vw;
  height: 100vh;
  .turn-content {
    display: flex;
    margin: 0px auto;
    overflow: hidden;
  }
}
.slider-bar {
  width: 900px;
  height: 8px;
  border-radius: 5px;
  background-color: #ccc;
  margin-top: 15px;
  display: flex;
  overflow: hidden;
  .slider {
    flex: 1;
    cursor: pointer;
  }
  .slider-current {
    background-color: #666;
    border-radius: 5px;
  }
}
</style>

